<template>
  <div>

    <MyPanel :data="list">
      <template #head>
        本周热搜 TOP5
      </template>

      <!-- 默认插槽也有名字，叫：default -->
      <!-- 这里需要拿到循环项数据进行每一项的渲染 -->
      <!-- 在填充插槽，接收作用域数据时，也可以用解构语法 -->
      <!-- <template v-slot:default="obj"> -->
      <template v-slot:default="{ row }">
        <div style="display: flex; justify-content: space-between; padding: 5px 10px; border-bottom: 1px solid #d3d3d3;">
          <div style="background-color: #eee; padding: 3px; border-radius: 5px;">#{{ row.name }}</div>
          <div>
            <span>🤣</span>
            <span>{{ row.hotNum }}</span>
          </div>
        </div>
      </template>
      
    </MyPanel>
    
    <MyPanel :data="list2">
      <template #head>
        <div style="display: flex; justify-content: space-between">
          <div>可能感兴趣的人</div>
          <div>换一批</div>
        </div>
      </template>

      <!-- 默认插槽也有名字，叫：default -->
      <template v-slot:default="{ row }">
        <div>
          自定义内容-{{ row }}
        </div>
      </template>
    </MyPanel>

  </div>
</template>

<script>

import MyPanel from './components/MyPanel.vue'

export default {
  name: 'App',
  components: {
    MyPanel
  },
  data() {
    return {
      list: [
        {
          id: 1,
          name: "区块链1",
          hotNum: 82,
        },
        {
          id: 2,
          name: "区块链2",
          hotNum: 12,
        },
        {
          id: 3,
          name: "区块链3",
          hotNum: 823,
        },
        {
          id: 4,
          name: "区块链4",
          hotNum: 12,
        },
        {
          id: 5,
          name: "区块链5",
          hotNum: 43,
        },
        {
          id: 6,
          name: "区块链6",
          hotNum: 75,
        },
      ],
      list2: [
        {
          id: 1,
          name: "苏轼",
          age: 52,
          major: "机电一体化技术",
          school: "合肥科技大学",
          honour: "教授1",
        },
        {
          id: 2,
          name: "苏轼2",
          age: 52,
          major: "机电一体化技术2",
          school: "合肥科技大学2",
          honour: "教授2",
        },
        {
          id: 3,
          name: "苏轼3",
          age: 523,
          major: "机电一体化技术3",
          school: "合肥科技大学3",
          honour: "教授3",
        },
        {
          id: 4,
          name: "苏轼4",
          age: 52,
          major: "机电一体化技术4",
          school: "合肥科技大学4",
          honour: "教授4",
        },
      ],
    }
  }
}
</script>

<style>

</style>